<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Js定时自动切换Tab效果</title>
<style type="text/css">
        *{
            margin: 0;
            padding: 0;
            text-decoration: none;
            list-style: none;
        }
        .container{
            width: 508px;
            border: 1px solid #eee;
            margin: 20px auto;
            height: 98px;
            position: relative;
            overflow: hidden;
        }
        .tab{
            height: 27px;
        }
        .tab-wrap{
            height: 27px;
            width: 551px;
            position: absolute;
            left: -1px;
            background: #ccc;
            overflow: hidden;
        }
        .tab-wrap li{
            float: left;
            text-align: center;
        }
        .tab-wrap li a{
            display: block;
            width: 100px;
            height: 26px;
            line-height: 26px;
            border-bottom: 1px solid #eee;
            padding: 0 1px;
            color: #000;
        }
        .tab-wrap .selected{
            background: #fff;
            color: orange;
            font-weight: bold;
            border-bottom: 1px solid #fff;
            border-right: 1px solid #eee;
            border-left: 1px solid #eee;
            padding: 0;
        }
        .content{
            width: 100%;
            height: 71px;
            overflow: hidden;
        }
        .content .mod{
            display: none;
        }
        .content div:first-child{
            display: block;
        }
        .mod ul{
            overflow: hidden;
        }
        .mod li{
            float: left;
            font-size: 14px;
            margin: 10px;
        }

</style>

</head>
<body>
<div class="container" id="container">
    <div class="tab" id="tab">
        <ul class="tab-wrap">
            <li><a href="#" class='selected'>选项卡一</a></li>
            <li><a href="#">选项卡二</a></li>
            <li><a href="#">选项卡三</a></li>
            <li><a href="#">选项卡四</a></li>
            <li><a href="#">选项卡五</a></li>
        </ul>
    </div>
    <div class="content" id="content">
        <div class="mod">
            选项卡一内容
        </div>
        <div class="mod">
            选项卡二内容
        </div>
        <div class="mod">
            选项卡三内容
        </div>
        <div class="mod">
            选项卡四内容
        </div>
        <div class="mod">
            选项卡五内容
        </div>
    </div>
</div>
</body>
<script>
    function getObj(id){
        return document.getElementById(id);
    }
    
    (function(){
       var tabs = getObj('tab').getElementsByTagName('a');
       var contents = getObj('content').getElementsByTagName('div');

       //根据tab序号选中指定菜单
       function switchTab(index){
          for(var i=0;i<tabs.length;i++){
              if(index == i){
                  tabs[index].className='selected';
                  contents[index].style.display = 'block';
              }else{
                  tabs[i].className='';
                  contents[i].style.display = 'none';
              }
          }
       }

       //鼠标移入时选中效果
       for(var i=0;i<tabs.length;i++){
          tabs[i].index=i;
          tabs[i].addEventListener('mouseover',function(){
             switchTab(this.index);
          },false);
       }

       var mark = 0;//轮播标记
       var timer;//定时器
       function autoPlay(){
          mark++;
          if (mark==tabs.length) {
                mark=0;
          }
          switchTab(mark);
       }
       timer=setInterval(autoPlay,2000);//添加定时轮播事件，轮播开始
       container.addEventListener('mouseout',function(){
            if (timer) {
                clearInterval(timer);
            }
            timer=setInterval(autoPlay,2000);
       },false);
    })();
</script>
</html>
